<!DOCTYPE html>
<html>
    <head>
        <style>
            h1.header {
                background-color: rgba(0,0,0,0.8);
                color: white;
                padding: 10px;
                margin: 5px -10px;
            }
            div.post{
                background-color: tomato;
                border-radius: 5px;
                margin: 10px;
                padding: 10px;
            }
            div.post h1.header{
                margin: 0px -10px;
                background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) , rgba(0, 0, 0, 0.3));
                color:white;
                padding-left: 10px;
            }
            div.postContent{
                background-color: rgba(0,0,0,0.8);
                color:white;
                border-radius: 5px;
                margin: 10px 0px 1px 0px;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <h1 class='header'>[::title]</h1>
        [::foreach post]
        <div class="post">
            <h1 class="header">
                [::header]
            </h1>
            <div class='postContent'>
            [::content]
            </div>
        </div>
        [::end]
    </body>
</html>